<template>
    <div class="goods-detail"> 
        <div class="head">
        </div>
        <div class="content">
            <div class="type flex bg">
                <div><img :src="content.url" alt=""></div>
                <div class="name">当前充值：{{content.name}}</div>
            </div>
            <div class="bg flex phone">
                <div class="phone-left">
                    <span class="star">*</span>
                    <span>充值账号:</span>
                </div>
                <input type="number" placeholder="请输入手机号" maxlength="11" v-model="phoneNumber">
            </div>
            <div class="bg flex radio">
                <div >充值类型</div>
                <div class="radio-right">视频会员</div>
            </div>
            <div class="bg flex column money">
                <div class="money-top">充值面额</div>
                <div class="money-bottom">
                    <div class="top">1个月</div>
                    <div >官网价 ￥30</div>
                    <div class="bottom">￥20.00</div>
                </div>
            </div>
            <div class="bg flex column rule">
                <p>购买须知</p>
                <p>购买提示 1、本商品为腾讯视频会员直充，VIP会员不支持电视端使用，超级影视支持电视端，电视端需另行下载云视听极光APP使用; </p>
                <p>2、本商品支持手机号码、QQ号码充值,充值成功后，登录领取; </p>
                <p>3、单个用户每天限制充值2单;</p>
                <p>4、超级影视会员不包含超前点播权益</p>
            </div>
            
        </div>
        <div class="bg flex btn"> 
            <div class="btn-left">
                <span>实付金额：</span>
                <span class="red">￥20.00</span>
            </div>
            <div class="btn-right" @click="submitAmount">提交订单</div>
        </div>
    </div>
</template>
<script>
import { useRoute} from 'vue-router'
import { ref, onMounted} from 'vue'
import api from '../api/index'
import { showToast} from 'vant'
export default {
  component: {
  },
  setup() {
    const type=[
        {
            name:'爱奇艺',
            url:'http://static-store.shyig.com/20240109/1f306e6e216e49c2ae15671e2c31840c.png',

        },
        {
            name:'腾讯视频',
            url:'http://static-store.shyig.com/20240109/32177520c9f04fc09a6ed30e8e2638f4.png'

        },
        {
            name:'优酷',
            url:'http://static-store.shyig.com/20240109/81a1214c514d4f0c98db7d531fc5f35b.png'

        }
    ]
    const content=ref(type[0])
    const phoneNumber=ref(null)
    const route = useRoute()

    onMounted(() => {
      const index=Number(route.query.type) 
      content.value=type[index]
    })
    
    const methods = {
       submitAmount(){
            if(phoneNumber.value){
                const index  =Number(route.query.type)
                const params={
                    amount:20,
                    phoneNumber:phoneNumber.value,
                    type:index ==1?'TENGXUN':index ==2?'YOUKU':'AIQIYI'
                }
                const url=`https://www.qhdyywlkj.com/api/tenant/payment/memberPay?amount=20&phoneNumber=${params.phoneNumber}&type=${params.type}`
                window.open(url)
               
        }else{
            showToast("手机号不能为空")
        }
       }
    }

    return {
        type,
        content,
        phoneNumber,
      ...methods,
    }
  }
}
</script>
<style lang="scss" scoped>
.goods-detail{
    font-size:.1rem;
    height:100vh;
    .flex{
      display: flex;
      align-items: center;
    }
    .column{
        flex-direction: column;
    }
    .red{
        color:#ea3f49;
    }
    .head{
       width: 100%;
       height:0.6rem;
       font-size:.1rem;
       background: linear-gradient(180deg, #3471f6 26.55%, rgba(52, 113, 246, 0.8) 63.84%, rgba(52, 113, 246, 0.6) 80.84%, rgba(52, 113, 246, 0) 100%);
       
    }
    .content{
        padding:.1rem;
        margin-top:-.45rem;
        text-align:left;
        .bg{
            background:#fff;
            padding:.1rem;
            margin:.1rem 0;
        }
    }
    .type{
        justify-items: center;
        align-items: center;
       
        img{
            width:.3rem;
            height:.3rem
        }
        .name{
            color:#3572f7;
            font-weight: 600;
            margin-left:.1rem;
        }
    }
    .phone{
     .phone-left{

     }
     input{
        border:none;
        margin-left:.05rem;
     }
     .star{
        color: #e72222;
        margin-right:.03rem;
     }
    }
    .radio{
        justify-content: space-between;
        .radio-right{
         height:.2rem;
         line-height: .2rem;
         border-radius: 0.05rem;
         padding:0 .1rem;
         background:#44352f;
         color:#ffddb4;
        }
    }
    .money{
        align-items: flex-start;
        .money-bottom{
            margin-top:.1rem;
            background-color: #fdf8ea;
            border-radius: 0.1rem;
            padding:.1rem;
            text-align: center;
            div{
                margin:.07rem 0;
                font-size:.09rem;
            }
            .top{
                font-weight: 600;
                font-size:.12rem
            }
            .bottom{
                font-weight: 600;
                font-size:.16rem 
            }
        }
    }
    .rule{
        align-items: flex-start;
        font-size:.09rem;
        color: #999;
        p{
            line-height:.15rem;
        }
    }
    .btn{
        background:#fff;
        padding: 0.1rem 0;
        position:fixed;
        bottom:0;
        width:100%;
        justify-content: space-between;
        .btn-left{
            margin-left:.1rem;
        }
        .btn-right{
            margin-right:.1rem;
            line-height:.2rem;
            padding:0 .1rem;
            background:#ea3f49;
            height:.2rem;
            color:#fff;
            border-radius: .05rem;

        }
    }
    
}

</style>